<template>
  <div class="app-container" style="padding: 5px;">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px" label-position="right">
      <el-form-item label="年月周：" prop="mode">
        <el-radio-group v-model="queryParams.mode" size="small" @change="handleChange">
          <el-radio v-for="(item, index) in modeList" :key="index" :label="item.value" border>{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年份：" prop="year">
        <el-checkbox-group v-model="queryParams.years" @change="handleChange">
          <el-checkbox v-for="(item, index) in yearList" :label="item.value" :key="index" border>{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="平台：" prop="platforms">
        <el-checkbox-group v-model="queryParams.platforms" size="small" @change="handleChange">
          <el-checkbox v-for="(item, index) in platList" :key="index" :label="item.value" border>{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div ref="chart1" style="width: 100%;height: 500px;margin-top: 5px;"></div>
    <div ref="chart2" style="width: 300%;height: 500px;margin-top: 5px;"></div>
    <div ref="chart3" style="width: 100%;height: 600px;margin-top: 5px;"></div>
    <el-table :data="yxfsList" border stripe height="500">
      <el-table-column label="客户姓名" align="center" prop="name"></el-table-column>
      <el-table-column label="网名" align="center" prop="nick_name"></el-table-column>
      <el-table-column label="平台名称" align="center" prop="platform"></el-table-column>
      <el-table-column label="开发时间" align="center" prop="date"></el-table-column>
      <el-table-column label="省内省外" align="center" prop="region"></el-table-column>
      <el-table-column label="地点" align="center" prop="location"></el-table-column>
      <el-table-column label="销售名称" align="center" prop="saleman_name"></el-table-column>
      <el-table-column label="是否转化" align="center" prop="is_trans"></el-table-column>
      <el-table-column label="咨询内容" align="center" prop="consult"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { listYxfsDicts,listRegionSummary,listAreaSummary,listYxfsLineSummary,listYxfsData } from "@/api/system/weekly/weeklydashboard";
import * as echarts from 'echarts';
export default {
    name: "Xmtyxfs",
    data() {
        return {
          yxfsList: [],
          yearList: [],
          platList: [],
          modeList: [
            {
                value:"y",
                label:"年"
            },
            {
                value:"m",
                label:"月"
            },
            {
                value:"w",
                label:"周"
            }
          ],
          queryParams: {
            platforms: [],
            mode: null,
            years: [],
          },
        }
    },
    created() {
      this.getYxfsDicts();
    },
    mounted(){
        
    },
    methods: {
      handleChange(){
        if(this.queryParams.years.length==0){
          this.$modal.msgError("请选择年份!");
          return false;
        }
        if(this.queryParams.platforms.length==0){
          this.$modal.msgError("请选择平台!");
          return false;
        }
        this.getRegionSummary();
        this.getAreaSummary();
        this.getYxfsLineSummary();
        this.getYxfsList();
      },
      getYxfsDicts(){
        listYxfsDicts().then(res =>{
          this.platList = res.data.platforms;
          this.yearList = res.data.years;
          this.queryParams.mode = res.data.mode;
          this.queryParams.years = res.data.year;
          this.queryParams.platforms = res.data.platformsInit;
          this.getRegionSummary();
          this.getAreaSummary();
          this.getYxfsLineSummary();
          this.getYxfsList();
        })
      },
      getYxfsList(){
        listYxfsData(this.queryParams).then(res =>{
          this.yxfsList = res.data;
        })
      },
      getYxfsLineSummary(){
        listYxfsLineSummary(this.queryParams).then(res =>{
          let platstr = "";
          if(this.queryParams.platforms.length>0){
            for(let i=0;i<this.queryParams.platforms.length;i++){
              if(i==this.queryParams.platforms.length-1){
                platstr += "和"+this.queryParams.platforms[i];
              }else{
                platstr += this.queryParams.platforms[i]+",";
              }
            }
          }
          let yearstr = "年份：";
          if(this.queryParams.years.length>0){
            if(this.queryParams.years.length==1){
              yearstr += this.queryParams.years[0]+"年";
            }else{
              for(let i=0;i<this.queryParams.years.length;i++){
                if(i==this.queryParams.years.length-1){
                  yearstr += "和"+this.queryParams.years[i]+"年";
                }else{
                  yearstr += this.queryParams.years[i]+"年,";
                }
              }
            }
          }
          let labels = [];
          if(res.data.list.length>0){
            for(let i=0;i<res.data.list.length;i++){
              labels.push(res.data.list[i].vdate);
            }
          }
            const chart = echarts.init(this.$refs.chart3);
            const option = {
              title: [{
                text: '有效粉丝折线图',
                subtext: '平台:'+platstr+"\n"+yearstr,
                left: 'left',  // 距离左侧 10px
              }],
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  },
                  formatter: function (params) {
                      return params[0].data.extraInfo
                  }
              },
              grid: {
                  height: '60%' // 设置内部图形的高度为容器高度的 70%
              },
              toolbox: {
                  show: true,
                  feature: {
                      magicType: { show: true, type: ['line', 'bar'] },
                      restore: { show: true },
                      saveAsImage: { show: true }
                  }
              },
              xAxis: {
                  type: 'category',
                  data: labels,
                  axisLabel: {
                      rotate: 45, // 设置 X 轴文字旋转角度
                      interval: 0, // 强制显示所有标签
                      fontSize: 12, // 文字大小
                      color: '#333' // 文字颜色
                  }
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                    data: res.data.list.map(item => ({
                      value: item.nums,
                      name: item.vdate,
                      extraInfo: "时间："+item.vdate+"<br />有效粉丝数："+item.nums+"<br />环比增长："+item.hb,
                      labelInfo: item.nums
                    })),
                    itemStyle: {
                      color: function(params) {
                        // 颜色数组
                        const colorList = res.data.colors;
                        // 根据数据索引返回对应颜色
                        return colorList[params.dataIndex % colorList.length];
                      }
                    },
                    type: 'line',
                    label: {
                      show: true, // 显示标签
                      position: 'top', // 标签位置
                      formatter: function (params) {
                        return params.data.labelInfo
                      }
                    }
                  }
              ]
          };
          chart.setOption(option);
        })
      },
      getAreaSummary(){
        listAreaSummary(this.queryParams).then(res =>{
          let platstr = "";
          if(this.queryParams.platforms.length>0){
            for(let i=0;i<this.queryParams.platforms.length;i++){
              if(i==this.queryParams.platforms.length-1){
                platstr += "和"+this.queryParams.platforms[i];
              }else{
                platstr += this.queryParams.platforms[i]+",";
              }
            }
          }
          let yearstr = "年份：";
          if(this.queryParams.years.length>0){
            if(this.queryParams.years.length==1){
              yearstr += this.queryParams.years[0]+"年";
            }else{
              for(let i=0;i<this.queryParams.years.length;i++){
                if(i==this.queryParams.years.length-1){
                  yearstr += "和"+this.queryParams.years[i]+"年";
                }else{
                  yearstr += this.queryParams.years[i]+"年,";
                }
              }
            }
          }
          let labels = [];
          if(res.data.list.length>0){
            for(let i=0;i<res.data.list.length;i++){
              labels.push(res.data.list[i].location);
            }
          }
          const chart1 = echarts.init(this.$refs.chart2);
          const option1 = {
              dataZoom: [
                  {
                      type: 'slider',
                      start: 0,
                      end: 50,
                      height: 20,
                      bottom: 10,
                      handleSize: '100%',
                      handleStyle: {
                          opacity: 0
                      },
                      fillerColor: '#ccc'
                  },
                  {
                      type: 'inside',
                      start: 0,
                      end: 50
                  }
              ],
              title: [{
                text: '有效粉丝具体地点',
                subtext: '平台:'+platstr+"\n"+yearstr,
                left: 'left',  // 距离左侧 10px
              }],
              tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                  return params[0].data.extraInfo
                }
              },
              grid: {
                left: '1%',
                right: '1%',
                bottom: '7%',
                containLabel: true,
                height: '80%',
              },
              toolbox: {
                show: true,
                feature: {
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  data: labels
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  // name: '金额',
                  type: 'bar',
                  data: res.data.list.map(item => ({
                    value: item.nums,
                    name: item.location,
                    extraInfo: "省内省外："+item.location+"<br/> 占比："+Number(item.rate).toFixed(2)+"%<br />有效粉丝数："+item.nums,
                    labelInfo: item.nums+"\n"+Number(item.rate).toFixed(2)+"%"
                  })),
                  itemStyle: {
                    color: function(params) {
                      // 颜色数组
                      const colorList = res.data.colors;
                      // 根据数据索引返回对应颜色
                      return colorList[params.dataIndex % colorList.length];
                    }
                  },
                  label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    formatter: function (params) {
                      return params.data.labelInfo
                    }
                  }
                }
              ]
          };
          chart1.setOption(option1);
        })
      },
      getRegionSummary(){
        listRegionSummary(this.queryParams).then(res =>{
          let platstr = "";
          if(this.queryParams.platforms.length>0){
            for(let i=0;i<this.queryParams.platforms.length;i++){
              if(i==this.queryParams.platforms.length-1){
                platstr += "和"+this.queryParams.platforms[i];
              }else{
                platstr += this.queryParams.platforms[i]+",";
              }
            }
          }
          let yearstr = "年份：";
          if(this.queryParams.years.length>0){
            if(this.queryParams.years.length==1){
              yearstr += this.queryParams.years[0]+"年";
            }else{
              for(let i=0;i<this.queryParams.years.length;i++){
                if(i==this.queryParams.years.length-1){
                  yearstr += "和"+this.queryParams.years[i]+"年";
                }else{
                  yearstr += this.queryParams.years[i]+"年,";
                }
              }
            }
          }
          let labels = [];
          if(res.data.list.length>0){
            for(let i=0;i<res.data.list.length;i++){
              labels.push(res.data.list[i].region);
            }
          }
          const chart1 = echarts.init(this.$refs.chart1);
          const option1 = {
              title: [{
                text: '有效粉丝省内外',
                subtext: '平台:'+platstr+"\n"+yearstr,
                left: 'left',  // 距离左侧 10px
              }],
              tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                  return params[0].data.extraInfo
                }
              },
              grid: {
                left: '1%',
                right: '1%',
                bottom: '7%',
                containLabel: true,
                height: '80%',
              },
              toolbox: {
                show: true,
                feature: {
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  data: labels
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  // name: '金额',
                  type: 'bar',
                  data: res.data.list.map(item => ({
                    value: item.nums,
                    name: item.region,
                    extraInfo: "省内省外："+item.region+"<br/> 占比："+Number(item.rate).toFixed(2)+"%<br />有效粉丝数："+item.nums,
                    labelInfo: item.nums+"\n"+Number(item.rate).toFixed(2)+"%"
                  })),
                  itemStyle: {
                    color: function(params) {
                      // 颜色数组
                      const colorList = res.data.colors;
                      // 根据数据索引返回对应颜色
                      return colorList[params.dataIndex % colorList.length];
                    }
                  },
                  label: {
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    formatter: function (params) {
                      return params.data.labelInfo
                    }
                  }
                }
              ]
          };
          chart1.setOption(option1);
        })
      },
    }
}
</script>